import { initShaders } from './webgl.js'
import { randomColor } from '../color/index.js'
import { _triangle } from './triangle.js';
import { _square } from './square.js';
import { _cube } from './cube.js';

// //顶点着色器
// <script id="vertexShader" type="x-shader/x-vertex">
//     void main() {
//         gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
//         gl_PointSize = 100.0;
//     }
// </script>
// //片元着色器
// <script id="fragmentShader" type="x-shader/x-fragment">
//     void main() {
//         gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
//     }
// </script>
// gl_Position = vec4(1.0, 0.0, 0.0, 1.0);
// gl_Position = vec4(-1.0, 0.0, 0.0, 1.0);
// gl_Position = vec4(0.0, 1.0, 0.0, 1.0);
// gl_Position = vec4(0.0, -1.0, 0.0, 1.0);
// gl_Position = vec4(1.0, 1.0, 0.0, 1.0);
// gl_Position = vec4-(1.0, 1.0, 0.0, 1.0);
// gl_Position = vec4(1.0, -1.0, 0.0, 1.0);
// gl_Position = vec4(-1.0, -1.0, 0.0, 1.0);

// 顶点着色器源码
var vertexShaderSrc = `
void main(){
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);// gl_Position 内置变量，表示点的位置，必须赋值
    gl_PointSize = 100.0;// gl_PointSize 内置变量，表示点的大小（单位像素），可以不赋值，默认为1.0，，绘制单个点时才生效
}`;

// 片段着色器源码
var fragmentShaderSrc = `
void main(){
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);// 内存变量，表示片元颜色RGBA
}`;

// 顶点着色器
const vertexShaderSource = `
  // 设置浮点数据类型为中级精度
  precision mediump float;

  // 接收顶点坐标 (x,y)
  attribute vec2 a_Position;

  void main () {
    gl_Position = vec4(a_Position, 0.0, 1.0);
  }
`;
// 片元着色器
const fragmentShaderSource = `
   // 设置浮点数据类型为中级精度
   precision mediump float;

   // 接收 JavaScript 传过来的颜色值（rgba）
   uniform vec4 u_Color;

   void main(){
     vec4 color = u_Color / vec4(255, 255, 255, 1);
     gl_FragColor = color;
   }
 `;

const shapeMap = {
    default: _triangle,
    glTriangle: _triangle,
    glSquare: _square,
    glCube: _cube
}

const mapShapFn = (t) => {
    return shapeMap[t] || shapeMap['default']
}

export const _webgl = (options = {}, props = {}) => {
    let {
        width = 800,
        height = 600,
        shapes
    } = options
    let canvas = document.createElement('canvas')
    canvas.width = width
    canvas.height = height
    const gl = canvas.getContext('webgl');


    shapes.forEach(t => {
        let fn = mapShapFn(t.shape)
        fn(gl, t)

    })


    return canvas
}